export const getBar = (datas, yAxisData) => {
  return {
    xAxis: {
      show: false,
      type: 'value',
      inverse: true,
    },
    yAxis: {
      type: 'category',
      position: 'right',
      inverse: true,
      show: false,
      splitNumber: yAxisData.length,
      data: yAxisData,
    },
    grid: {
      right: 0,
      top: 0,
      bottom: 0,
      containLabel: false,
    },
    series: [
      {
        type: 'bar',
        barWidth: 17,
        label: {
          show: true,
          position: 'left',
          color: '#9AA6B8',
        },
        itemStyle: {
          borderRadius: [8, 0, 0, 8],
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 1, color: '#4fa9eb' },
              { offset: 0, color: '#87d4f7' },
            ],
          },
        },
        data: datas,
      },
    ],
  }
}

export const getLine = (datas, coordinate) => {
  const maxX = datas
    .map((item) => item.value)
    .reduce((a, b) => (Math.abs(a) > Math.abs(b) ? Math.abs(a) : Math.abs(b)))
  return {
    xAxis: {
      show: false,
      type: 'value',
      min: -maxX,
      max: maxX,
    },
    yAxis: {
      inverse: true,
      show: true,
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#A6A1DF',
          width: 1,
          type: [3, 2],
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      boundaryGap: true,
      data: coordinate,
    },
    grid: {
      left: '10%',
      right: '10%',
      top: 0,
      bottom: 0,
      containLabel: false,
    },
    series: {
      type: 'line',
      data: datas,
      label: {
        show: true,
        formatter: '{c}%',
        position: 'left',
        color: '#9AA6B8',
      },
      smooth: true,
      lineStyle: {
        width: 4,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 1, color: '#A36DBE' },
            { offset: 0, color: '#E26E88' },
          ],
        },
      },
      symbolSize: 12,
      symbol: 'circle',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 1, color: '#A36DBE' },
            { offset: 0, color: '#E26E88' },
          ],
        },
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 5,
        shadowOffsetX: -2,
        borderColor: '#FFFFFF',
        borderWidth: 2,
      },
    },
  }
}
